<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <!-- Import style -->
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"/>
    <!-- Import Vue 3 -->
    <script src="//cdn.jsdelivr.net/npm/vue@3"></script>
    <!-- Import component library -->
    <script src="//cdn.jsdelivr.net/npm/element-plus"></script>
    <script src="//cdn.bootcdn.net/ajax/libs/axios/0.21.4/axios.js"></script>
    <script src="//cdn.bootcdn.net/qs/6.7.0/qs.min.js"></script>
</head>
<body>
<div id="app">
    <el-result title="" sub-title="请在Microsoft Edge浏览器中打开" v-if="!isEdge">
        <template #icon>
            <el-image src="/edge.png" style="width: 100px; height: 100px"/>
        </template>
        <template #extra></template>
    </el-result>
    <el-row :gutter="24" v-if="isEdge">
        <el-col :span="8" :offset="8">
            <el-radio-group v-model="loginType">
                <el-radio value="password">用户名密码登录</el-radio>
                <el-radio value="mobile">短信验证码登录</el-radio>
            </el-radio-group>
            <el-form v-if="loginType === 'password'" label-position="top" ref="form" :rules="rules" label-width="auto" :model="form" style="max-width: 600px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="form.password" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="loginByUsername">登录</el-button>
                </el-form-item>
            </el-form>
            <el-form v-if="loginType === 'mobile'" label-position="top" ref="formMobile" :rules="rulesMobile" label-width="auto" :model="formMobile" style="max-width: 600px">
                <el-form-item label="手机号" prop="mobile">
                    <el-input v-model="formMobile.mobile" />
                </el-form-item>
                <el-form-item label="短信验证码" prop="code">
                    <el-input v-model="formMobile.code" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="loginByMobileCode">登录</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</div>
<script type="text/javascript">
    axios.defaults.baseURL = 'http://127.0.0.1:10050'
    const App = {
        data() {
            return {
                loginType: 'password',
                form: {
                    username: '',
                    password: ''
                },
                rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                    ]
                },
                formMobile: {
                    mobile: '',
                    code: ''
                },
                rulesMobile: {
                    mobile: [
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                    ],
                    code: [
                        { required: true, message: '请输入短信验证码', trigger: 'blur' },
                    ]
                },
                isEdge: false
            }
        },
        mounted() {
            this.isEdge = window.navigator.userAgent.includes('Edg')
        },
        methods: {
            loginByUsername() {
                this.$refs['form'].validate(valid => {
                    console.log(valid)
                    if (valid) {
                        axios({
                            url: '/login',
                            data: Qs.stringify(this.form),
                            method: 'post'
                        }).then(res => {
                            console.log(res)
                            if (res.data.code === '0000') {
                                alert('登录成功：' + Qs.stringify(res.data.body))
                                location.href = res.data.body.redirectUrl
                            } else {
                                alert(res.data.message)
                            }
                        }).catch(res => {
                            console.log(res)
                            alert('登录失败：' + res)
                        })
                    }
                })
            },
            loginByMobileCode() {
                this.$refs['formMobile'].validate(valid => {
                    console.log(valid)
                    if (valid) {
                        axios({
                            url: '/loginByMobileCode',
                            data: Qs.stringify(this.formMobile),
                            method: 'post'
                        }).then(res => {
                            console.log(res)
                            if (res.data.code === '0000') {
                                alert('登录成功：' + Qs.stringify(res.data.body))
                                location.href = res.data.body.redirectUrl
                            } else {
                                alert(res.data.message)
                            }
                        }).catch(res => {
                            console.log(res)
                            alert('登录失败：' + res)
                        })
                    }
                })
            }
        },
    }
    Vue.createApp(App).use(ElementPlus).mount("#app");
</script>
</body>
</html>